<template>
  <div id="scene">
    <div>{{ mes }}</div>
    <div>{{ mess }}</div>
    <div>{{ messa }}</div>
    <div>{{ message.name }}</div>
    <div>{{ test }}</div>
    <button @click="type">检测类型</button>
    <button @click="operation">数组操作</button>
    <button @click="diff">异步操作</button>
    <!-- <div>{{mes}}</div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      mes: "wxy",
      mess: 123,
      messa: true,
      message: { name: "wxy" },
      test: ["heart", "face", "eye", "mouth"],
      num: [5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      // operation:func,
    };
  },
  mounted() {
    // console.log(this.diff());
    // this.diff().then((data) => {
    //   console.log(data);
    // });
  },
  methods: {
    type() {
      console.log(typeof this.mes);
      console.log(typeof this.mess);
      console.log(typeof this.messa);
      console.log(typeof this.message);
      console.log(this.test instanceof Array);
    },
    operation() {
      // this.test.push("message");//向数组的末尾添加元素
      //  this.test.pop();//删除数组末尾的元素
      //this.test.shift();//删除数组头部的元素
      // this.test.unshift("xuexi")//向数组的头部添加元素
      //  this.num.sort();
      let arr = Array.from(new Set(this.num));
      arr.sort().reverse();
      console.log(arr);
    },
    time() {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log(111);
          resolve();
        }, 1000);
      });
    },
    async diff() {
      let arr = 125;
      //  let val = await arr;
      await this.time();
      console.log(arr);
    },
  },
};
</script>

<style lang="less" scoped>
#scene {
  width: 100%;
  height: 100%;
}
</style>